@import '../config/import';

.crayons-notice {
  padding: var(--su-4);
  background: var(--card-bg);
  color: var(--card-color);
  border-radius: var(--radius-auto);

  &--danger {
    background: var(--accent-danger-a10);
  }

  &--warning {
    background: var(--accent-warning-a10);
  }

  &--success {
    background: var(--accent-success-a10);
  }

  &--info {
    background: rgba(var(--brand), 0.1);
  }

  &--close {
    float: right;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--base);
    text-shadow: 0 1px 0 var(--base-inverted);
    opacity: var(--opacity-50);
    padding: 0;
    border: 0;
    background-color: transparent;
  }
}
